<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				订单详情
			</text>
		</base-nav-bar>
		<view class="content-box"  v-if="!isEmpty" style="margin-top: 20rpx;">
			<view class="u-flex u-flex-column u-flex-between merchant-box u-p-t-20 u-m-l-30 u-m-r-30 u-m-b-20">
				<view class="goods-item u-flex u-flex-start u-flex-items-center u-p-l-20 u-p-b-20 u-p-r-20">
					<image :src="orderDetail.image" class="merchant-logo u-flex-1"></image>
					<view class="u-flex u-flex-start u-flex-column u-flex-items-start u-flex-3 ">
						<view class="u-flex u-flex-items-start u-flex-between u-m-l-20  u-p-r-20" style="width: 100%;">
							<view class="goods-item-text">{{ orderDetail.nbame }}</view>
							<view class="course-item-btn edit">{{ orderDetail.price }}</view>
						</view>
						<view class="u-flex u-flex-between u-flex-items-center u-m-t-20 u-m-l-20 u-p-r-10" style="width: 100%;">
							<view class="goods-item-number u-flex-1 u-ellipsis-2">{{orderDetail.description}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-column u-flex-between merchant-content u-m-l-30 u-m-r-30 u-m-b-20">
				<view class="u-flex u-flex-start u-flex-items-center">
					<view class="goods-item u-flex u-flex-start u-flex-column u-flex-items-start u-flex-3">
						<view class="u-flex u-flex-items-start u-flex-column u-flex-between u-m-l-20 u-m-r-20" style="width:calc(100% - 40rpx);">
							<view class="goods-item-title" style="width: 100%;">订单详情</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center u-m-t-20 u-m-l-20 u-m-r-20" style="width:calc(100% - 40rpx);">
							<view class="u-flex u-flex-between u-flex-items-center u-flex-1" style="width: 100%;">
								<view class="goods-item-btn edit">订单编号</view>
								<view class="goods-item-btn delete">{{orderDetail.out_trade_no}}</view>
							</view>
							<view class="u-flex u-flex-1 u-flex-between u-flex-items-center u-m-t-20 " style="width: 100%;">
								<view class="goods-item-btn edit">购买时间</view>
								<view class="goods-item-btn delete">{{ orderDetail.createtime }}</view>
							</view>
							<view class="u-flex u-flex-1 u-flex-between u-flex-items-center u-m-t-20 " style="width: 100%;">
								<view class="goods-item-btn edit">订单金额</view>
								<view class="goods-item-btn delete">{{ orderDetail.price }}</view>
							</view>
							<view class="u-flex u-flex-1 u-flex-between u-flex-items-center u-m-t-20 " style="width: 100%;">
								<view class="goods-item-btn edit">实付金额</view>
								<view class="goods-item-btn delete">{{ orderDetail.fixed_score }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty
			v-if="isEmpty"
			mode="data"
			text="暂无记录"
		>
		</u-empty>
		
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";
export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			isEmpty      : false,
			orderDetail:{}
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight",statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		if(!this.isLogin){
		
		}
		
	},
	onHide() {
	},
	onLoad(options) {
		if(options&&options.id){
			this.order_id = options.id
			this.getOrderDetail();
		}
	},
	created() {
	
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		getOrderDetail(){
			let that = this;
			that.$Api.merchant.scoreFixedLogOrder({
				order_id    : that.order_id
			}).then(res => {
				that.orderDetail = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}

.content-box{
	.merchant-box{
		background:linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 30%, #FFFFFF 100%);
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1), inset 0px 1px 0px 0px #FFFFFF;
		border-radius: 30rpx;
		min-height: 11vh;
		position: relative;
		.goods-item{
			width: 100%;
			.merchant-logo{
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}
			.merchant-icon{
				width: 30rpx;
				height: 30rpx;
			}
			.goods-item-text{
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
			.course-item-btn{
				font-weight: 500;
				font-size: 40rpx;
				color: #FD463E;
			}
		}
		
	}
	.merchant-content{
		background:linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 30%, #FFFFFF 100%);
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1), inset 0px 1px 0px 0px #FFFFFF;
		border-radius: 30rpx;
		min-height: 22vh;
		position: relative;
		.goods-item{
			padding:0 20rpx;
			.goods-item-title{
				padding:20rpx 0;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 24px;
				text-align: left;
				font-style: normal;
				border-bottom: 1rpx solid #E6E5E5;
			}
			.goods-item-btn{
				color: #565656;
			}
		}
		
	}
}
</style>
